<template>
  <el-dialog
          :model-value="visible"
          title="编辑"
          @close="dialogClose"
          width="40%"
  >
     <el-form :model="row" ref="formRef" :rules="formRules" label-width="100px">
        <el-form-item label="事件名称：" prop="name">
          <el-input v-model="row.name"></el-input>
        </el-form-item>
        <el-form-item label="事件状态：" prop="status">
           <el-radio-group v-model="row.status">
              <el-radio border :label='1' >未开始</el-radio>   <!-- label是字符串，:label是数字-->
              <el-radio border :label='2' >处理中</el-radio>
              <el-radio border :label='3' >已完成</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="事件等级：" prop="grade">
           <el-radio-group v-model="row.grade">
              <el-radio border :label='1' >警告</el-radio>   <!-- label是字符串，:label是数字-->
              <el-radio border :label='2' >严重</el-radio>
              <el-radio border :label='3' >灾难</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="开始时间：" prop="start_time">
             <el-date-picker v-model="row.start_time" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间：" prop="end_time">
            <el-date-picker v-model="row.end_time" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="处理人员：" prop="user">
           <el-select class="m-2" filterable multiple v-model="row.user" @click="getUser" placeholder="请选择">
            <el-option v-for="row in user" :key="row.id" :label="row.first_name" :value="row.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogClose">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </span>
      </template>

  </el-dialog>
</template>

<script>
    export default {
        props: {
            visible: Boolean,
            row: '',  // 当前行内容
        },
        data() {
            return {
                user: '',
                formRules: {
                    name: [
                        {required: true, message: '请输入事件名称', trigger: 'blur'},
                        {min: 2, message: '事件名称长度应不小于2个字符', trigger: 'blur'}
                    ],
                   status: [
                      {required: true, message: '请选择事件状态', trigger: 'blur'},
                   ],
                   grade: [
                      {required: true, message: '请选择事件等级', trigger: 'blur'},
                   ],
                   start_time: [
                      {required: true, message: '请选择开始时间', trigger: 'blur'},
                   ],
                   end_time: [
                      {required: true, message: '请选择结束时间', trigger: 'blur'},
                   ],
                   user: [
                      {required: true, message: '请选择处理人员', trigger: 'blur'},
                   ],
                },
            }
        },
        methods: {
          dialogClose() {
            this.$emit('update:visible', false); // 当对话框关闭，通过父组件更新为false
            this.$parent.getData();
          },
          getUser() {
            this.$http.get('/config/user/?page_size=50')
                .then(res => {
                    this.user = res.data.data;
                });
            },
          submit() {
            this.$refs.formRef.validate((valid) => {
              if (valid) {
                this.$http.put('/tools/event/' + this.row.id + '/', this.row)
                  .then(res => {
                    if (res.data.code == 200){
                      this.$message.success('修改成功');
                      this.dialogClose()  // 关闭窗口
                    }
                  })
              } else {
                this.$message.error('格式错误！')
              }
            })
          },
        },
        watch: {
             visible() {
                if(this.visible){  // 关闭窗口不请求
                    const user = this.row.user;
                    this.row.user = []; // [1,5,3]
                    for(let i in user) {
                        this.row.user.push(user[i].id)
                    }

                    this.getUser();
                }
            }
        }
    }
</script>

<style scoped>

</style>